<script lang="ts" setup>
import type { ContactInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

interface Option {
  text: string
  value: string
}

const { phoneNumber, contactInfo } = storeToRefs(useApplyStore())

const { next } = useSteps('contact')
const ruleForm = ref<FormInst | null>(null)
// form初始化
const form = ref<ContactInfo>({
  contactCertType: '01',
  contactCertName: '',
  contactCertNo: '',
  contactCertStartDate: '',
  contactCertEndDate: '',
  contactPhone: phoneNumber.value,
  // contactCertAddrDet: '',
})
if (contactInfo.value.contactCertName) {
  form.value = contactInfo.value
}
const certUploader = ref()

function certZhengValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.zheng)
    })
  })
}
function certBeiValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.bei)
    })
  })
}

const rules = {
  cert: [
    { validator: certZhengValidator, message: '请上传证件照正面图片' },
    { validator: certBeiValidator, message: '请上传证件照反面图片' },
  ],
  contactCertName: [
    { required: true, message: '请输入姓名' },
  ],
  contactCertNo: [
    { required: true, message: '请输入证件号码' },
    { regex: /^[0-9xX]{18}$/, message: '必须由18位的数字或字母X构成' }
  ],
  contactCertStartDate: [
    { required: true, message: '请输入发证日期' },
  ],
  contactCertEndDate: [
    { required: true, message: '请输入到期日期' },
  ],
  // contactCertAddrDet: [
  //   { required: true, message: '请输入证件地址' },
  // ],
  contactPhone: [
    { required: true, message: '请输入手机号码' },
  ],
}

const options = ref<Option[]>([
  { text: '身份证', value: '01' },
  // { text: '军官证', value: '02' },
  // { text: '护照', value: '03' },
  // { text: '港澳居民来往内地通行证（回乡证）', value: '04' },
  // { text: '台湾同胞来往内地通行证（台胞证）', value: '05' },
  // { text: '警官证', value: '06' },
  // { text: '士兵证', value: '07' },
  // { text: '户口簿', value: '08' },
  // { text: '临时身份证', value: '09' },
  // { text: '外国人永久居留身份证', value: '10' },
  // { text: '其他证件', value: '99' },
])

function certUploaded(value: any) {
  if (value.type === '5') {
    form.value.contactCertName = value.certName
    form.value.contactCertNo = value.certNo
    // form.value.contactCertAddrDet = value.certAddr
  }
  else if (value.type === '6') {
    form.value.contactCertStartDate = value.certStartDate
    form.value.contactCertEndDate = value.certEndDate
  }
}

function clickNext() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      form.value.contactCertNo = form.value.contactCertNo.toLocaleUpperCase()
      contactInfo.value = form.value
      next()
    }
  })
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item required prop="cert">
        <cert-upload ref="certUploader" type="contact" :source-type="['album','camera']" @uploaded="certUploaded" />
      </nut-form-item>
      <nut-form-item label="证件类型" required :label-width="120">
        <option-select v-model="form.contactCertType" title="证件类型" :options="options" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="姓名" prop="contactCertName" required :label-width="120">
        <nut-input v-model="form.contactCertName" class="nut-input-text" placeholder="请输入姓名" type="text"
          input-align="right" placeholder-style="color:#ccc;" max-length="20" />
      </nut-form-item>
      <nut-form-item label="证件号码" prop="contactCertNo" required :label-width="120">
        <idnumber-input v-model="form.contactCertNo" placeholder="请输入证件号码" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="发证日期" prop="contactCertStartDate" required :label-width="120">
        <date-picker v-model="form.contactCertStartDate" title="发证日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="到期日期" prop="contactCertEndDate" required :label-width="120">
        <date-picker v-model="form.contactCertEndDate" title="到期日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="手机号码" prop="contactPhone" required :label-width="120">
        <nut-input v-model="form.contactPhone" class="nut-input-text" placeholder="请输入手机号码" type="text" disabled
          input-align="right" placeholder-style="color:#ccc;" max-length="11" />
      </nut-form-item>
    </nut-form>

    <div class="button">
      <nut-button type="primary" custom-class="login-btn shake_o" block @click="clickNext">下一步</nut-button>
      <!-- <nut-button type="primary" block @click="clickNext">下一步</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .button
    margin: 40px 20px

:deep(.nut-form-item__label)
  display: flex!important
  flex-direction: row!important
  min-width: 100px!important
:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

:deep(.nut-textarea__textarea)
  text-align: right!important

:deep(.nut-uploader__upload)
  width: 100%!important

:deep(.nut-uploader__preview)
  width: 100%!important

:deep(.nut-step-main)
  margin-top: 20rpx

:deep(.nut-uploader__preview-img)
  width: 320rpx
</style>
